点此查看全部文字教程、视频教程、源代码

通过Element提供的时间选择器进行时间输入，是非常简单高效的，本篇来介绍下时间选择器常见用法。

使用el-time-picker标签即可创建任意时间选择器，选中的值会绑定value。

如果想给时间选择器提供一个默认的显示时间，可以直接为绑定变量赋予一个Date对象。

所以该时间选择器默认会显示8:10:30。

默认的时间格式很难看，如下图： 可以通过value-format属性指定时间格式：

此时选择时间后，选中值如下：

可以通过参数设定选择时间所属的时间段：

上面代码规定，只能选择18:00:00 - 23:30:00之内的时间。如下图，不再时间段内的时间点是禁止选择的：

有时候，我们不想让用户选择任意的时间，而是规定必须选择我们指定的时间点，例如每个整点。则可以如下设置：

注意标签变为el-time-select而不是el-time-picker，select表示选择的意思，后面设定了选择的起止时间和变化步幅。 效果如下：

当选择时间发生变化，可以通过@change绑定对应函数。